<template>
  <div @touchmove="touchmove" ref="boxHeight">
    <TopDate></TopDate>
    <div class="header">
      <div>
        <img :src="useraccountnumbers?.headerImg" alt="" />
      </div>
      <div>hello, {{ useraccountnumbers?.username }}</div>
      <div>
        <img src="@/icon/wuuicontixing.png" alt="" />
      </div>
    </div>
    <div class="topbangdan">
      <div>高评分推荐</div>
      <div v-if="topTinement != null">
        <div
          v-for="(item, i) in topTinement"
          :key="i"
          @click="changeManhuua(item.comic_id)"
        >
          <div>
            <img :src="item.vertical_cover + '@300w.jpg'" alt="" />
          </div>
          <div>{{ item.title }}</div>
          <div>{{ item.introduction }}</div>
        </div>
      </div>
    </div>
    <div class="recommend">
      <div>全部</div>
      <div v-if="dataAlls != null">
        <div
          v-for="(item, i) in dataAlls"
          :key="i"
          @click="changeManhuua(item.season_id)"
        >
          <div>
            <img :src="item.vertical_cover + '@200w.jpg'" alt="" />
          </div>
          <div>{{ item.title }}</div>
          <div>类型</div>
        </div>
        
      </div>
      <span>{{ homeMsg }}</span>
    </div>
    <BottomNavigationBar></BottomNavigationBar>
  </div>
</template>

<script>
import TopDate from "@/components/TopDate.vue";
import BottomNavigationBar from "@/views/BottomNavigationBar.vue";

export default {
  components: {
    TopDate: TopDate,
    BottomNavigationBar: BottomNavigationBar,
  },
  props: {
    dataAlls: {
      type: Array,
    },
    topTinement: {
      type: Array,
    },
    useraccountnumbers: {
      type: Object,
    },
    homeMsg:{
      typeof:String,
    }
  },
  data() {
    return {
      name: "张三",
      pageNum: 1,
    };
  },
  computed: {
    boxHeight() {
      return 146 + (this.dataAlls.length / 2) * 275;
    },
  },
  methods: {
    changeManhuua(id) {
      this.$emit("change-manhuua", id);
    },
    touchmove(e) {
      if (
        e.changedTouches[0].pageY >
        this.$refs.boxHeight.scrollHeight - 1000 - 1000
      ) {

        this.$emit("data-all", this.pageNum);
      }
    },
    getuseraccountnumbers(){
      this.$emit('get-useraccountnumbers',1);
    }
  },
  created() {
    this.getuseraccountnumbers()
  },
};
</script>

<style lang="less" scoped>
.topbangdan {
  color: @color4;
  > div:nth-child(1) {
    text-align: left;
    font-size: 18rem;
    margin-left: 25rem;
    margin-top: 20rem;
  }
  > div:nth-child(2) {
    width: 335rem;
    margin: 0 auto;
    font-size: 14rem;
    margin-top: 15rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    > div {
      width: 150rem;
      text-align: left;
      margin-right: 15rem;

      img {
        width: 150rem;
        height: 200rem;
        border-radius: 10rem;
      }
      > div {
        margin-top: 6rem;
      }
      > div:nth-child(3) {
        color: #8d8d8d;
      }
    }
  }
}
.recommend {
  color: @color4;
  > div:nth-child(1) {
    text-align: left;
    font-size: 18rem;
    margin-left: 25rem;
    margin-top: 20rem;
  }
  > div:nth-child(2) {
    width: 335rem;
    margin: 0 auto;
    font-size: 14rem;
    margin-top: 15rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    > div {
      width: 155rem;
      text-align: left;
      // margin-right: 25rem;

      img {
        width: 155rem;
        height: 200rem;
        border-radius: 10rem;
      }
      > div {
        margin-top: 6rem;
      }
      > div:nth-child(3) {
        color: #8d8d8d;
      }
    }
  }
}
.header {
  width: 325rem;
  margin: 0 auto;
  padding-top: 50rem;
  display: flex;
  align-items: center;
  > div:nth-child(1) {
    img {
      width: 40rem;
      height: 40rem;
      border-radius: 50%;
    }
  }
  > div:nth-child(2) {
    font-size: 16rem;
    color: @color4;
    margin-left: 10rem;
  }
  > div:nth-child(3) {
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    background-color: @color3;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    right: 20rem;
    img {
      width: 20rem;
      height: 20rem;
    }
  }
}
</style>